<template>  
    <div class="wrap">
        <!--信息头-->
        <span>我的信息</span>
        <el-divider></el-divider>
        <div class="banner">
            <el-row class="first_row">
                <el-col :span="2"></el-col>
                <!--第一个卡片视图区域-->
                <el-card :span="20" :offset="2" class="box-card">
                    <span>个人信息</span>
                    <el-divider></el-divider>
                    <el-row type="flex" align="middle">
                        <el-col :span="5" :offset="4">
                            <span >账号名:</span>
                        </el-col>
                        <el-col :span="16" :offset="4">
                            <span>{{account}}</span>
                            <!-- <el-input v-model="input" placeholder="请输入h" :disabled="chgDisable"></el-input> -->
                        </el-col>
                    </el-row>
                    <!-- <el-row type="flex" align="middle">
                        <el-col :span="5" :offset="4">
                            <span >密码:</span>
                        </el-col>
                        <el-col :span="16" :offset="4">
                            <span>****** </span> -->
                            <!-- <el-input v-model="input" placeholder="请输入h" :disabled="chgDisable"></el-input> -->
                        <!-- </el-col> -->
                    <!-- </el-row> -->
                    <el-row type="flex" align="middle">
                        <el-col :span="5" :offset="4">
                            <span >联系电话:</span>
                        </el-col>
                        <el-col :span="16" :offset="4">
                            <!-- <el-input v-model="input" placeholder="请输入联系方式" :disabled="chgDisable"></el-input> -->
                            <span>{{telephone}}</span>
                        </el-col>
                    </el-row>
                    <el-row type="flex" align="middle">
                        <el-col :span="5" :offset="4">
                            <span>角色:</span><br/>
                        </el-col>
                        <el-col :span="16" :offset="4">
                            <span>{{roleName}}</span>
                            <!-- <el-input v-model="input" placeholder="请输入邮箱地址" :disabled="chgDisable"></el-input> -->
                        </el-col>
                    </el-row>
                </el-card>
                <!-- <el-col :span="4"></el-col> -->
            </el-row>
            <el-row class="second_row">
                <!--第二个卡片区域-->
                <el-card class="box-card">
                    <div class="box-card__title">
                        <span class="tile">企业信息</span>
                        <span class="action" v-if="!isEnterpriseAuthen" @click="showDialog">企业认证</span>
                        <!-- <span class="action" @click="showDialog">企业认证</span> -->
                    </div>
                    <el-divider></el-divider>
                    <!-- <el-row>
                        <el-col :offset="14">
                            <el-switch
                                    @change="chgEditStat"
                                    v-model="value1"
                                    active-text="编辑"
                                    inactive-text="保存"
                                    :active-value="0"
                                    :inactive-value="1">
                            </el-switch>
                            <el-button  @click="chgEditStat">{{EditText}}</el-button>
                        </el-col>
                    </el-row> -->
                    <el-row type="flex" align="middle">
                        <el-col :span="5" :offset="4">
                            <span >企业名称:</span>
                        </el-col>
                        <el-col :span="16" :offset="4">
                            <span>{{enterpriseName}}</span>
                            <!-- <el-input v-model="input" placeholder="请输入h" :disabled="chgDisable"></el-input> -->
                        </el-col>
                    </el-row>
                    <el-row type="flex" align="middle">
                        <el-col :span="5" :offset="4">
                            <span >企业法人:</span>
                        </el-col>
                        <el-col :span="16" :offset="4">
                            <span>{{enterprisePerson}}</span>
                            <!-- <el-input v-model="input" placeholder="请输入h" :disabled="chgDisable"></el-input> -->
                        </el-col>
                    </el-row>
                     <el-row type="flex" align="middle">
                        <el-col :span="5" :offset="4">
                            <span >企业邮箱:</span>
                        </el-col>
                        <el-col :span="16" :offset="4">
                            <span>{{enterpriseEmail}}</span>
                            <!-- <el-input v-model="input" placeholder="请输入内容" :disabled="chgDisable"></el-input> -->
                        </el-col>
                    </el-row>
                    <el-row type="flex" align="middle">
                        <el-col :span="5" :offset="4">
                            <span >企业地址:</span>
                        </el-col>
                        <el-col :span="16" :offset="4">
                            <!-- <el-input v-model="input" placeholder="请输入联系方式" :disabled="chgDisable"></el-input> -->
                            <span>{{enterpriseAddress}}</span>
                        </el-col>
                    </el-row>
                    <el-row type="flex" align="middle">
                        <el-col :span="5" :offset="4">
                            <span >商务电话:</span><br/>
                        </el-col>
                        <el-col :span="16" :offset="4">
                            <span>{{bussinessContactPhone}}</span>
                            <!-- <el-input v-model="input" placeholder="请输入邮箱地址" :disabled="chgDisable"></el-input> -->
                        </el-col>
                    </el-row>
                    <el-row type="flex" align="middle">
                        <el-col :span="5" :offset="4">
                            <span>认证信息:</span><br/>
                        </el-col>
                        <el-col :span="16" :offset="4">
                            <span style="color:red">{{isEnterpriseAuthen ? '已认证' : '未认证'}}</span>
                            <!-- <el-input v-model="input" placeholder="请输入邮箱地址" :disabled="chgDisable"></el-input> -->
                        </el-col>
                    </el-row>
                </el-card>
            </el-row>
        </div>
        <el-dialog title="伙伴入驻" :visible.sync="addDialogVisible" width="50%" @close="handleClose">
            <!--内容主体区-->
            <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="120px" align="middle">
                <el-form-item label="公司名称" prop="enterpriseName">
                <el-input v-model="addForm.enterpriseName"></el-input>
                </el-form-item>
                <el-form-item label="公司法人" prop="enterprisePerson">
                <el-input v-model="addForm.enterprisePerson"></el-input>
                </el-form-item>
                <el-form-item label="公司邮箱" prop="enterpriseEmail">
                <el-input v-model="addForm.enterpriseEmail"></el-input>
                </el-form-item>
                <el-form-item label="公司地址" prop="address">
                <el-input v-model="addForm.address"></el-input>
                </el-form-item>
                <el-form-item label="商务联系人电话" prop="bussinessContactPhone">
                <el-input v-model="addForm.bussinessContactPhone"></el-input>
                </el-form-item>
                <el-form-item label="上传营业执照" prop="certificateUrl">
                <el-upload
                    class="avatar-uploader"
                    action=""
                    list-type="picture"
                    :show-file-list="false"
                    :on-success="handleSuccess"
                    :http-request="handleUpload"
                >
                    <img v-if="addForm.certificateUrl" :src="baseAssets + '/' + addForm.certificateUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                </el-form-item>
            </el-form>
            <!--底部区域-->
            <span slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取 消</el-button>
                <el-button type="primary" :loading="sumbitLoading" @click="handleSubmit">确 定</el-button>
                </span>
            </el-dialog>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { enterpriseAuth } from '@/api/enterprise'
import { uploadFile } from '@/api/file'
export default {
    computed: {
        ...mapGetters('user', 
            [
                'account',
                'telephone',
                'roleName',
                'enterpriseName',
                'enterprisePerson',
                'enterpriseEmail',
                'enterpriseAddress',
                'bussinessContactPhone',
                'isEnterpriseAuthen'
            ]
        )
    },
    data () {
        return {
            baseAssets: process.env.VUE_APP_BASE_ASSETS,
            chgDisable: true,
            EditText: '编辑',
            value1: true, 
            admin:{
                login: "123@qq.com",
                name: "jiangxb",
                phone: "13788715716",
                role: "管理员"
            },
            addDialogVisible: false,
            sumbitLoading: false,
            addForm: {
                enterpriseName: '',
                enterprisePerson: '',
                enterpriseEmail: '',
                address: '',
                bussinessContactPhone: '',
                certificateUrl: ''
            },
            addFormRules: {
                enterpriseName: [
                    { required: true, message: '请输入公司名称', trigger: 'blur' },
                    { min: 3, max: 15, message: '公司名称的长度在3-15个字符之间', trigger: 'blur' }
                ],
                enterprisePerson: [
                    { required: true, message: '请输入公司法人', trigger: 'blur' },
                    { min: 2, max: 10, message: '公司法人的长度在2-10个字符之间', trigger: 'blur' }
                ],
                enterpriseEmail: [
                    { required: true, message: '请输入公司邮箱', trigger: 'blur' },
                    { min: 3, max: 20, message: '公司邮箱的长度在3-20个字符之间', trigger: 'blur' }
                ],
                address: [
                    { required: true, message: '请输入公司地址', trigger: 'blur' },
                    { min: 3, max: 20, message: '公司地址的长度在3-20个字符之间', trigger: 'blur' }
                ],
                bussinessContactPhone: [
                    { required: true, message: '请输入商务联系人电话', trigger: 'blur' },
                    { min: 3, max: 15, message: '经理电话的长度在3-15个字符之间', trigger: 'blur' }
                ],
                certificateUrl: [
                    { required: true, message: '请上传营业执照', trigger: 'blur' }
                ]
            },
        }
    },
    methods: {
        showDialog () {
            this.addDialogVisible = true
        },
        handleClose () {
            this.$refs.addFormRef.resetFields()
        },
        handleSuccess () {
            // this.$refs.addFormRef.resetFields()
        },
        handleUpload (options) {
            let formData = new FormData()
            formData.append('theme', 'certificate')
            formData.append('file', options.file)
            uploadFile(formData).then((res) => {
                if (res.success) {
                    this.addForm.certificateUrl = res.data
                } else {
                    this.$message.error(res.retDesc)
                }
            })
        },
        // handleSuccess(res, file) {
        //     this.imageUrl = URL.createObjectURL(file.raw);
        // },
        chgEditStat () {
            if (this.value1 === 1) {
                this.chgDisable = true
            } else {
                this.chgDisable = false
            }
        },
        handleSubmit () {
            this.$refs.addFormRef.validate((valid) => {
                if (valid) {
                    this.sumbitLoading = true
                    enterpriseAuth(this.addForm).then((res) => {
                        this.sumbitLoading = false
                        if (res.success) {
                            this.addDialogVisible = false
                            this.$message.success(res.retDesc)
                        } else {
                            this.$message.error(res.retDesc)
                        }
                    })
                }
            })
        }
    }
}

</script>

<style lang="less" scoped>
.box-card{
    width: 800px;
    margin: 0 auto;
    height: 330px;
    // padding: 15px 20px 15px 60px;
    box-show: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
    .box-card__title {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-content: center;
        .tile {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .action {
            padding: 5px;
            border: 1px solid red;
            color: red;
            cursor: pointer;
        }
    }
}
.el-row{
    margin-bottom: 15px;
}
.box1{
    width: 450px;
}
.box2{
    width: 450px;
    // padding-left: 10px;
}
.wrap{
    width: 1200px;
}
.banner{
    width: 1200px;
    height: 100%;
    .first_row{
        margin-top: 30px;
    }
    .second_row{
    margin-top: 30px;
}
}

.row_class{
    height: 50px;
}
.blank_class{
    height: 20px;
}
.mine_info{
    font-size:20px;
}
.content{
    margin-left: 10px;
    p{
        line-height: 50px;
    }
}
.avatar-uploader{
  width: 178px;
  height: 178px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
